<template>
  <view class="base-text-warp">
    <wd-popup
      v-model="localVisible"
      custom-style="width:36vw;height:35vh "
      custom-class="rounded  box-border"
    >
      <view class="pb-[30px] p-[20px]">
        <view class="mb-[14px] font-600 text-[22px]" v-if="title">{{ title }}</view>

        <wd-picker-view :columns="options" v-model="baseValue" />

        <view class="text-right mt-[60px] mr-[20px] mb-[20px]">
          <wd-button type="text" class="mr-[20px]" @click="onClose">取消</wd-button>
          <wd-button type="text" @click="onSubimt">确定</wd-button>
        </view>
      </view>
    </wd-popup>
  </view>
</template>

<script lang="ts" setup>
interface Props {
  options: Array<{
    label: string
    value: string
    disabled?: boolean
  }>
  title?: string
  value: string | undefined
  visible: boolean
}

const emit = defineEmits<{
  'update:value': [value: { label: string; value: string; disabled?: boolean }]
  'update:visible': [value: boolean]
}>()

const baseValue = ref()
const props = withDefaults(defineProps<Props>(), {})

watch(
  () => props.value,
  (newValue) => {
    if (newValue !== undefined && newValue !== null) {
      baseValue.value = newValue
    }
  },
)

const localVisible = computed({
  get: () => {
    return props.visible
  },
  set: (val) => {
    emit('update:visible', val)
  },
})

const onClose = () => {
  emit('update:visible', false)
}
const onSubimt = () => {
  let paramsData
  if (baseValue.value === undefined) {
    paramsData = props.options[0]
  } else {
    paramsData = props.options.find((k) => k.value === baseValue.value)
  }

  emit('update:visible', false)
  emit('update:value', paramsData)
}
</script>

<style lang="scss" scoped>
.base-text-warp {
  width: 100%;
  min-height: 20%;
  background-color: #fff;
  border-radius: 8px;

  display: flex;
  flex-direction: column;

  .wd-picker-view {
    height: 150px;
  }
}
</style>
